<template>
  <view class="container">
    <!-- 分类菜单 -->
    <scroll-view scroll-x class="category-scroll">
      <view class="category-list">
        <view 
          class="category-item" 
          v-for="(item, index) in categories" 
          :key="index"
          :class="{'active': currentCategory === item.id}"
          @tap="switchCategory(item.id)"
        >
          {{item.name}}
        </view>
      </view>
    </scroll-view>

    <!-- 收藏列表 -->
    <view class="collect-list">
      <view class="collect-item" v-for="(item, index) in collectList" :key="index" @tap="navigateToDetail(item)">
        <image class="cover" :src="item.cover" mode="aspectFill"></image>
        <view class="content">
          <text class="title">{{item.title}}</text>
          <text class="desc">{{item.description}}</text>
          <view class="meta">
            <view class="author">
              <image class="avatar" :src="item.author.avatar" mode="aspectFill"></image>
              <text>{{item.author.name}}</text>
            </view>
            <view class="time">{{item.collectTime}}</view>
          </view>
        </view>
        <view class="action" @tap.stop="cancelCollect(item)">
          <uni-icons type="trash" size="20" color="#999"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty" v-if="collectList.length === 0">
      <image src="/static/images/empty.png" mode="aspectFit"></image>
      <text>暂无收藏</text>
    </view>

    <!-- 加载更多 -->
    <uni-load-more :status="loadMoreStatus"></uni-load-more>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentCategory: 'all',
      categories: [
        { id: 'all', name: '全部' },
        { id: 'news', name: '资讯' },
        { id: 'lawyer', name: '律师' },
        { id: 'case', name: '案例' }
      ],
      collectList: [],
      page: 1,
      pageSize: 10,
      loadMoreStatus: 'more'
    }
  },
  onLoad() {
    this.loadData()
  },
  onReachBottom() {
    if (this.loadMoreStatus === 'more') {
      this.loadMore()
    }
  },
  methods: {
    loadData() {
      // TODO: 加载收藏数据
      this.loadMoreStatus = 'loading'
      // 模拟数据
      setTimeout(() => {
        this.collectList = [
          {
            id: 1,
            type: 'news',
            title: '最新婚姻法司法解释出台',
            description: '最高人民法院发布关于适用《中华人民共和国民法典》婚姻家庭编的解释（一）',
            cover: '/static/images/news/news1.jpg',
            author: {
              name: '张律师',
              avatar: '/static/images/avatar/lawyer1.jpg'
            },
            collectTime: '2024-01-20'
          },
          {
            id: 2,
            type: 'lawyer',
            title: '李律师',
            description: '专注刑事辩护、交通事故',
            cover: '/static/images/avatar/lawyer2.jpg',
            author: {
              name: '李律师',
              avatar: '/static/images/avatar/lawyer2.jpg'
            },
            collectTime: '2024-01-19'
          }
        ]
        this.loadMoreStatus = 'more'
      }, 1000)
    },
    loadMore() {
      this.page++
      // TODO: 加载更多数据
    },
    switchCategory(categoryId) {
      this.currentCategory = categoryId
      this.page = 1
      this.collectList = []
      this.loadData()
    },
    navigateToDetail(item) {
      let url = ''
      switch (item.type) {
        case 'news':
          url = `/pages/news/detail?id=${item.id}`
          break
        case 'lawyer':
          url = `/pages/team/detail?id=${item.id}`
          break
        case 'case':
          url = `/pages/case/detail?id=${item.id}`
          break
      }
      uni.navigateTo({ url })
    },
    cancelCollect(item) {
      uni.showModal({
        title: '提示',
        content: '确定取消收藏吗？',
        success: (res) => {
          if (res.confirm) {
            // TODO: 调用取消收藏接口
            const index = this.collectList.findIndex(i => i.id === item.id)
            if (index > -1) {
              this.collectList.splice(index, 1)
            }
            uni.showToast({
              title: '已取消收藏',
              icon: 'success'
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 30rpx;
}

.category-scroll {
  background-color: #fff;
  white-space: nowrap;
  
  .category-list {
    display: inline-flex;
    padding: 20rpx;
    
    .category-item {
      padding: 10rpx 30rpx;
      font-size: 28rpx;
      color: #666;
      background-color: #f5f5f5;
      border-radius: 30rpx;
      margin-right: 20rpx;
      
      &.active {
        color: #fff;
        background-color: #1890ff;
      }
    }
  }
}

.collect-list {
  padding: 20rpx;
  
  .collect-item {
    display: flex;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    
    .cover {
      width: 200rpx;
      height: 150rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }
    
    .content {
      flex: 1;
      
      .title {
        font-size: 28rpx;
        font-weight: bold;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      
      .desc {
        font-size: 24rpx;
        color: #666;
        margin-top: 10rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      
      .meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20rpx;
        
        .author {
          display: flex;
          align-items: center;
          
          .avatar {
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            margin-right: 10rpx;
          }
          
          text {
            font-size: 24rpx;
            color: #666;
          }
        }
        
        .time {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
    
    .action {
      padding: 20rpx;
      margin: -20rpx -20rpx -20rpx 0;
    }
  }
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0;
  
  image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }
  
  text {
    font-size: 28rpx;
    color: #999;
  }
}
</style> 